<template>
  <div class="container">
    <div class="tabber">
      <a-space size="medium" direction="vertical" fill>
        <a-space>
          <a-input placeholder="请输入内容搜索内容" v-model="search"></a-input>
          <a-select style="width: 100px" v-model="searchType">
            <a-option
              v-for="item in classify"
              :key="item.key"
              :value="item.key"
              >{{ item.name }}</a-option
            >
          </a-select>
          <a-button type="primary" @click="handleSearch">
            <template #icon>
              <icon-search />
            </template>
            <template #default>搜索</template>
          </a-button>
        </a-space>
        <a-space>
          <!-- <a-button type="primary">
            <template #icon>
              <icon-plus />
            </template>
            <template #default>新增</template>
          </a-button> -->
          <a-button type="primary" @click="handleRefresh">
            <template #icon>
              <icon-loop />
            </template>
            <template #default>刷新</template>
          </a-button>
        </a-space>
      </a-space>
    </div>
    <a-table
      row-key="id"
      :columns="columns"
      :data="data"
      column-resizable
      :row-selection="rowSelection"
      v-model:expandedKeys="expandedKeys"
      :pagination="pagination"
      :bordered="{ cell: true }"
      :scroll="{ x: 'max-content' }"
      size="small"
      :table-layout-fixed="true"
    >
      <template #avatar="{ record }">
        <a-avatar :imageUrl="BASE_URL + record.avatar"> </a-avatar>
      </template>
      <template #balance="{ record }">
        <a-tag color="orangered"> ¥{{ record.balance.toFixed(2) }}元 </a-tag>
      </template>
      <template #vip="{ record }">
        <a-tag color="arcoblue"> {{ record.vip }} </a-tag>
      </template>
      <template #followingCount="{ record }">
        <a-tag color="gray"> {{ record.followingCount }} </a-tag>
      </template>
      <template #likeCount="{ record }">
        <a-tag color="gray"> {{ record.likeCount }} </a-tag>
      </template>
      <template #fansCount="{ record }">
        <a-tag color="gray"> {{ record.fansCount }} </a-tag>
      </template>
      <template #optional="{ record }">
        <a-button
          size="mini"
          type="primary"
          style="margin-right: 5px"
          @click="editorHanddle(record)"
          >编辑</a-button
        >
        <a-button size="mini" status="danger" @click="deleteHanddle(record)"
          >删除</a-button
        >
      </template>
    </a-table>
  </div>
  <!-- 编辑弹框 -->
  <a-modal
    width="800px"
    v-model:visible="visible"
    title="修改数据"
    @before-ok="handleUpdate"
  >
    <a-form
      :model="form"
      style="
         {
        }
      "
    >
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item field="id" label="ID">
            <a-input disabled v-model="form.id" />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item field="name" label="昵称">
            <a-input v-model="form.nikeName" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="email" label="邮箱">
            <a-input v-model="form.email" />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item field="integral" label="钱包">
            <a-input disabled v-model="form.balance" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="vip" label="等级">
            <a-select v-model="form.vip">
              <a-option v-for="i in 5" :key="i" :value="i">{{ i }}</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item field="sex" label="性别">
            <a-select v-model="form.sex">
              <a-option>保密</a-option>
              <a-option>女</a-option>
              <a-option>男</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="" label="生日">
            <a-date-picker v-model="form.birthday" />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item field="" label="身高">
            <a-select v-model="form.height">
              <template v-for="i in 100" :key="i">
                <a-option>{{ i + 130 }}cm</a-option>
              </template>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="" label="体重">
            <a-select v-model="form.weight">
              <template v-for="i in 200" :key="i">
                <a-option>{{ i + 35 }}kg</a-option>
              </template>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item field="" label="星座">
            <a-select v-model="form.horoscope">
              <a-option>白羊座</a-option>
              <a-option>金牛座</a-option>
              <a-option>双子座</a-option>
              <a-option>巨蟹座</a-option>
              <a-option>狮子座</a-option>
              <a-option>处女座</a-option>
              <a-option>天秤座</a-option>
              <a-option>天蝎座</a-option>
              <a-option>射手座</a-option>
              <a-option>摩羯座</a-option>
              <a-option>水瓶座</a-option>
              <a-option>双鱼座</a-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="" label="城市">
            <a-input disabled v-model="form.city" />
          </a-form-item>
        </a-col>
        <a-col :span="11">
          <a-form-item field="" label="简介">
            <a-input v-model="form.desc" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
  <!-- 删除弹框 -->
  <a-modal v-model:visible="delvalue" title="确认删除" @before-ok="delBeforeOk">
    <a-form :model="form">
      <a-form-item field="id" label="ID">
        <a-input disabled v-model="form.id" />
      </a-form-item>
      <a-form-item field="name" label="用户名">
        <a-input disabled v-model="form.nikeName" />
      </a-form-item>
      <a-form-item field="name" label="邮箱">
        <a-input disabled v-model="form.email" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { BASE_URL } from "../../constant/index";
import { reactive, ref, onMounted } from "vue";
import {
  getUserListApi,
  putUserAdminApi,
  deleteUserAdminApi,
} from "@/api/user";
import { IconPlus, IconSearch, IconLoop } from "@arco-design/web-vue/es/icon";
import { Message } from "@arco-design/web-vue";
import { isValidEmail } from "../../utils/vilidatorUtils";

// 已选择的数据
const expandedKeys = ref([]);

const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: false,
  onlyCurrent: false,
});
const pagination = { pageSize: 10 };
const columns = [
  {
    title: "#",
    dataIndex: "id",
    fixed: "left",
    width: 150,
    ellipsis: true,
    tooltip: true,
    align: "center",
  },
  {
    title: "头像",
    slotName: "avatar",
    width: 80,
    align: "center",
  },

  {
    title: "昵称",
    dataIndex: "nikeName",
    width: 150,
    ellipsis: true,
    tooltip: true,
    align: "center",
  },

  {
    title: "邮箱",
    dataIndex: "email",
    width: 200,
    ellipsis: true,
    tooltip: true,
    align: "center",
  },
  {
    title: "钱包",
    slotName: "balance",
    width: "auto",
    align: "center",
  },
  {
    title: "等级",
    slotName: "vip",
    width: 64,
    align: "center",
  },
  {
    title: "关注量",
    slotName: "followingCount",
    width: 75,
    align: "center",
  },
  {
    title: "粉丝量",
    slotName: "fansCount",
    width: 75,
    align: "center",
  },
  {
    title: "获赞量",
    slotName: "likeCount",
    width: 75,
    align: "center",
  },
  {
    title: "性别",
    dataIndex: "sex",
    width: 100,
    align: "center",
  },
  {
    title: "生日",
    dataIndex: "birthday",
    width: 120,
    align: "center",
  },
  {
    title: "身高",
    dataIndex: "height",
    width: 120,
    align: "center",
  },
  {
    title: "体重",
    dataIndex: "weight",
    width: 120,
    align: "center",
  },
  {
    title: "星座",
    dataIndex: "horoscope",
    width: 120,
    align: "center",
  },
  {
    title: "城市",
    dataIndex: "city",
    width: 250,
    ellipsis: true,
    tooltip: true,
    align: "center",
  },
  {
    title: "简介",
    dataIndex: "desc",
    width: 160,
    ellipsis: true,
    tooltip: true,
    align: "center",
  },
  {
    title: "操作",
    fixed: "right",
    width: 200,
    slotName: "optional",
    align: "center",
  },
];

const data = ref([]);
const page = ref(1);
const limit = ref(1000);
const total = ref(1000);

// 获取用户数据
async function getUserData() {
  const getRes = await getUserListApi({ page: page.value, limit: limit.value });
  console.log(getRes);
  if (getRes.code === 200) {
    data.value = getRes.data.list;
    total.value = getRes.data.total;
    page.value = getRes.data.page;
    limit.value = getRes.data.limit;
    console.log(data);
  }
}

// 获取用户数据
onMounted(() => {
  getUserData();
});

// 搜索筛选
const search = ref();
const searchType = ref("email");
const classify = ref([
  { name: "昵称", key: "nikeName" },
  { name: "邮箱", key: "email" },
  { name: "#", key: "id" },
]);
async function handleSearch() {
  console.log(search.value);
  console.log(searchType.value);
  await getUserData();
  data.value = data.value.filter((item) => {
    return item[searchType.value].includes(search.value);
  });
}
// 显示编辑弹框
const visible = ref(false);
const form = ref({});

// 点击编辑按钮
function editorHanddle(item) {
  console.log(item);
  form.value = JSON.parse(JSON.stringify(item));
  // form.value = item;
  visible.value = true;
}
// 点击刷新按钮
function handleRefresh() {
  data.value = [];
  getUserData();
}
// 更新用户
async function handleUpdate(done) {
  // console.log(done);
  console.log(form.value);
  const {
    id,
    birthday,
    city,
    email,
    vip,
    desc,
    height,
    horoscope,
    nikeName,
    sex,
    weight,
  } = form.value;
  const putRes = await putUserAdminApi({
    id,
    birthday,
    city,
    email,
    vip,
    desc,
    height,
    horoscope,
    nikeName,
    sex,
    weight,
  });
  console.log(putRes);
  if (!isValidEmail(email)) {
    Message.error("邮箱格式不正确");
    return false;
  }
  if (putRes.code === 200) {
    Message.info("更新成功");
    // 更新数据
    getUserData();
    done();
  } else {
    Message.error("更新失败");
    return false;
  }
}

// 删除弹框
const delvalue = ref(false);
// 点击删除按钮
function deleteHanddle(item) {
  console.log(item);
  form.value = JSON.parse(JSON.stringify(item));
  delvalue.value = true;
}
// 确认删除
async function delBeforeOk() {
  const { id } = form.value;
  console.log(id);
  const delRes = await deleteUserAdminApi({ id });
  console.log(delRes);
  if (delRes.code === 200) {
    Message.info("删除成功");
    // 更新数据
    getUserData();
    delvalue.value = false;
  } else {
    Message.error("删除失败");
    return false;
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 14px;
  box-sizing: border-box;
  .tabber {
    padding-block: 14px;
  }
}
/* 设置所有表格单元格的内容水平和垂直居中 */
</style>
